<template>
	<view class="welfare-main">
		<h3 class="welfare-task-title">任务中心</h3>
		<view class="welfare-task-box">
				<image class="welfare-task-image" src="/static/welfare-image01.png" mode=""></image>
				<p>第1天</p>
		</view>
		<view class="welfare-task-box">
				<image class="welfare-task-image" src="/static/welfare-image01.png" mode=""></image>
				<p>第2天</p>
		</view>
		<view class="welfare-task-box">
				<image class="welfare-task-image" src="/static/welfare-image01.png" mode=""></image>
				<p>第3天</p>
		</view>
		<view class="welfare-task-box">
				<image class="welfare-task-image" src="/static/welfare-image01.png" mode=""></image>
				<p>第4天</p>
		</view>
		<view class="welfare-task-box">
				<image class="welfare-task-image" src="/static/welfare-image01.png" mode=""></image>
				<p>第5天</p>
		</view>
		<view class="welfare-task-box">
				<image class="welfare-task-image" src="/static/welfare-image01.png" mode=""></image>
				<p>第6天</p>
		</view>
		<view class="welfare-task-box">
				<image class="welfare-task-image" src="/static/welfare-image01.png" mode=""></image>
				<p>第7天</p>
		</view>
	</view>
	<swiper-little></swiper-little>
</template>

<script>
	export default {
		name:"welfare-task",
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
.welfare-main{
	background-color: #fff;
	height: 320rpx;
	width: 94%;
	margin-left: 3%;
	border-radius: 26rpx;
	margin-top: 20rpx;
	position: relative;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	.welfare-task-title{
		position: absolute;
		top: 0;
		left: 0;
	}
	.welfare-task-box{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.welfare-task-image{
			width: 60rpx;
			height: 110rpx;
		}
	}
}
.welfare-task-news{
	height: 130rpx;
	.welfare-task-news-image{
		width: 100%;
		height: 100%;
		border-radius: 26rpx;
	}
}
</style>